<template>
    <div class="tag" v-bind:class="classObject">
        {{text}}
    </div>
</template>

<script>
    export default {
        name: 'tag',
        props: {
            type: {
                //todo inprogress merged done
                type: String,
                require: true
            }
        },
        created: function () {
            switch (this.type) {
                case 'todo':
                    this.classObject.todo = true;
                    this.text = "待处理";
                    break;
                case 'done':
                    this.classObject.done = true;
                    this.text = "已完成";
                    break;
                case 'inprogress':
                    this.classObject.inprogress = true;
                    this.text = "处理中"
                    break;
                case 'merged':
                    this.classObject.merged = true;
                    this.text = "已合并"
                    break;
            }
        },
        data: function () {
            return {
                classObject: {
                    todo: false,
                    done: false
                },
                text: '',
            }
        }
    }
</script>

<style scoped>
    .tag {
        padding: 1px 10px;
        border: 1px solid black;
        border-radius: 40px;
        font-size: 12px;
        box-sizing: border-box;
        display: inline-block;
        color: white;
    }

    .tag.todo {
        background-color: green;
        border-color: darkgreen;
    }

    .tag.inprogress {
        background-color: orange;
        border-color: darkgoldenrod;
    }

    .tag.merged {
        background-color: darkorchid;
        border-color: purple;
    }

    .tag.done {
        background-color: blue;
        border-color: darkblue;
    }
</style>